﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="Music.DetailPage"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Music"
    xmlns:data="using:Music.Data"
    xmlns:common="using:Music.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.TopAppBar>
        <AppBar x:Name="TopAppBar" Height="140" Background="#DD000000">
            <common:TopAppBar x:Name="TopBar" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </AppBar>
    </Page.TopAppBar>
    
    <Page.BottomAppBar>
        <AppBar Height="90" Background="#DD000000" x:Name="BotAppBar">
            <common:BottomAppBar x:Name="BotBar" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </AppBar>
    </Page.BottomAppBar>

    <Page.Resources>

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource
            x:Name="itemsViewSource"
            Source="{Binding Items}"
            d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:HubPageDataSource, IsDesignTimeCreatable=True}}"/>

        

        <CollectionViewSource
            x:Name="groupedItemsViewSource1"
            Source="{Binding Groups3}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:RecentDataSource, IsDesignTimeCreatable=True}}"/>

        <CollectionViewSource
            x:Name="groupedItemsViewSource2"
            Source="{Binding Groups2}"
            IsSourceGrouped="true"
            ItemsPath="TopItems"
            d:Source="{Binding AllGroups, Source={d:DesignInstance Type=data:RelatedDataSource, IsDesignTimeCreatable=True}}"/>
    </Page.Resources>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}" Tapped="Grid_Tapped_1">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFD52339"/>
                <GradientStop Color="#FFE93826" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->

        <!-- Back button and page title -->

        <!-- Back button and page title -->
        <FlipView
    		Grid.RowSpan="2"
    		x:Name="flipView"
    		AutomationProperties.AutomationId="ItemsFlipView"
    		AutomationProperties.Name="Item Details"
    		TabIndex="1"
    		ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

    		<FlipView.ItemContainerStyle>
    			<Style TargetType="FlipViewItem">
    				<Setter Property="Margin" Value="0,137,0,0"/>
    			</Style>
    		</FlipView.ItemContainerStyle>
            
    		<FlipView.ItemTemplate>                
    			<DataTemplate>
    				<ScrollViewer HorizontalScrollBarVisibility="Auto" Style="{StaticResource HorizontalScrollViewerStyle}">
    				
    					<StackPanel Orientation="Horizontal" Margin="120,0,80,0" >
                            <VisualStateManager.VisualStateGroups>

                                <!-- Visual states reflect the application's view state -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullScreenLandscape"/>
                                    <VisualState x:Name="Filled"/>

                                    <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <!-- The back button and title have different styles when snapped -->
                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <StackPanel>
    							<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
    								<!--<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/>-->

    								<TextBlock Text="{Binding Subtitle}" Style="{StaticResource GroupHeaderTextStyle}" FontSize="30"/>
    								<Path Width="38" Height="38" Stretch="Fill" Fill="White" Data="{StaticResource HeaderNext}"/>
    							</StackPanel>
    							<Grid Width="632" Height="370" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0,10">
    								<Grid.RowDefinitions>
    									<RowDefinition/>
    									<RowDefinition Height="44"/>
    								</Grid.RowDefinitions>
    								<Image Grid.RowSpan="2" Source="{Binding Image}" Stretch="UniformToFill"/>
    								<Slider VerticalAlignment="Bottom" Style="{StaticResource SeekBarSliderStyle}" Foreground="#FFD72537" BorderBrush="Black" BorderThickness="1" Value="70" Height="36" Margin="14,0"/>
    								<Grid Grid.Row="1" Background="#FFEDEDED">
    									<Grid.ColumnDefinitions>
    										<ColumnDefinition Width="12"/>
    										<ColumnDefinition/>
    										<ColumnDefinition Width="2*"/>
    										<ColumnDefinition/>
    										<ColumnDefinition Width="12"/>
    									</Grid.ColumnDefinitions>
    									<StackPanel Grid.Column="1" Orientation="Horizontal" VerticalAlignment="Center">
    										<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="Volume" VerticalAlignment="Center" Foreground="Black" FontFamily="Segoe UI" FontSize="13.333"/>
    										<Slider Width="56" VerticalAlignment="Center" Margin="5,0" Style="{StaticResource VolumeSliderStyle}" Foreground="White" BorderBrush="Black" BorderThickness="1" Value="70" Height="36"/>
    									</StackPanel>
    									<StackPanel Grid.Column="2" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
    										<Button Tag="{StaticResource Previous}" Foreground="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource PrevNextBtnStyle}" Width="27" Height="11" Margin="5,0"/>
    										<CheckBox Content="CheckBox" HorizontalAlignment="Center" Style="{StaticResource PlayPauseChkBoxStyle}" VerticalAlignment="Center" IsChecked="False"/>
    										<Button Tag="{StaticResource Next}" Foreground="Black" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{StaticResource PrevNextBtnStyle}" Width="27" Height="11" Margin="5,0"/>
    									</StackPanel>
    									<CheckBox Content="FullScreen" HorizontalAlignment="Right" VerticalAlignment="Center" Grid.Column="3" Foreground="Black" Style="{StaticResource FullScreenChkBoxStyle}" FontSize="13.333"/>

    								</Grid>
    							</Grid>
                        
    							<Button Width="140" Height="30" Style="{StaticResource RecentBtnStyle}" BorderBrush="{x:Null}" BorderThickness="0" Content="Recently played" Margin="0,5,0,10" FontFamily="Segoe UI Light" FontWeight="Light" Background="#FFEDEDED" Foreground="Black"/>

    							<GridView 
    								x:Name="itemGridView" Width="640" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
    								Margin="-3.6,0,0,0"
    								ItemTemplate="{StaticResource RecentTemplate}"        
    								ItemsSource="{Binding Source={StaticResource groupedItemsViewSource1}}"                        
    								HorizontalAlignment="Left" SelectionMode="None" VerticalAlignment="Top">   
    								<GridView.ItemsPanel>
    									<ItemsPanelTemplate>
    										<VirtualizingStackPanel Orientation="Horizontal"/>
    									</ItemsPanelTemplate>
    								</GridView.ItemsPanel>                               
                              
    							</GridView>
    						</StackPanel>
    						<StackPanel Orientation="Vertical" Width="330" Margin="80,47,0,0">
    							<Grid Height="48" VerticalAlignment="Top" Background="#FFEDEDED">
    								<StackPanel>
    									<TextBlock TextWrapping="Wrap" Text=" Noluisse accusamus" Foreground="#FFD62438" FontFamily="Segoe UI" FontSize="20.667" LineStackingStrategy="BaselineToBaseline" LineHeight="17.333"/>
    									<TextBlock TextWrapping="Wrap" Text=" Dolor tollit possim in qui" Foreground="Black" FontFamily="Segoe UI" FontSize="13.333" LineStackingStrategy="BaselineToBaseline" LineHeight="6.667" Margin="2,0,3,0"/>
    								</StackPanel>
    							</Grid>
    							<Grid Height="470" VerticalAlignment="Top" Background="#FFEDEDED" Margin="0,10,0,0">
    								<StackPanel>
    									<TextBlock TextWrapping="Wrap" Text="Lyrics" Foreground="#FFD62438" FontFamily="Segoe UI" FontSize="20.667" LineStackingStrategy="BaselineToBaseline" LineHeight="17.333" Margin="5,0,0,0"/>
    									<ScrollViewer Margin="5" Style="{StaticResource VerticalScrollViewerStyle}" Height="435" Template="{StaticResource LyricsScrollViewerStyle}">
    										<TextBlock TextWrapping="Wrap" Foreground="Black" FontFamily="Segoe UI" FontSize="13.333" LineStackingStrategy="BaselineToBaseline" Padding="0,0,20,0" Text="{Binding Description}"/>                						
    									</ScrollViewer>
    								</StackPanel>
    							</Grid>
    						</StackPanel>

                            <GridView
            x:Name="itemGridView2"
            AutomationProperties.AutomationId="ItemGridView"
            AutomationProperties.Name="Grouped Items"
            Grid.RowSpan="2"
            Padding="80,5,0,0"
            ItemsSource="{Binding Source={StaticResource groupedItemsViewSource2}}"
            ItemTemplate="{StaticResource RelatedItemTemplate}"
            SelectionMode="None"
            IsSwipeEnabled="false"
            IsItemClickEnabled="True"
            >
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VirtualizingStackPanel Orientation="Vertical"/>
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                                <GridView.GroupStyle>
                                    <GroupStyle>
                                        <GroupStyle.HeaderTemplate>
                                            <DataTemplate>
                                                <Grid Margin="1,0,0,6">
                                                    <Button
                                    AutomationProperties.Name="Group Title"                                    
                                    Style="{StaticResource TextPrimaryButtonStyle}" >
                                                        <StackPanel Orientation="Horizontal">
                                                            <TextBlock Text="" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" />                                                            
                                                        </StackPanel>
                                                    </Button>
                                                </Grid>
                                            </DataTemplate>
                                        </GroupStyle.HeaderTemplate>
                                        <GroupStyle.Panel>
                                            <ItemsPanelTemplate>
                                                <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0" VerticalAlignment="Top"/>
                                            </ItemsPanelTemplate>
                                        </GroupStyle.Panel>
                                    </GroupStyle>
                                </GridView.GroupStyle>
                            </GridView>

                        </StackPanel>
                    
               

    				</ScrollViewer>
                    
               

                </DataTemplate>
    		</FlipView.ItemTemplate>
    	</FlipView>


        <TextBlock x:Name="SnapTxt" Text="Please Switch to Fullscreen to view the contents" Grid.RowSpan="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Margin="10" Visibility="Collapsed" TextWrapping="Wrap"/>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <Image x:Name="AppLogo" Source="Assets/AppLogo.png" Grid.Column="1" HorizontalAlignment="Right" Margin="40,0" Height="95"/>
            <TextBlock x:Name="pageTitle" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1" IsHitTestVisible="false" Text="Your page title goes here"/>
        </Grid>
        
        <Popup Grid.Row="1" VerticalAlignment="Bottom" x:Name="Popup">
            <Grid Background="#FFE5E5E5" Height="140" Width="380" Margin="20,-300,0,0">
                <common:Equilizer/>
            </Grid>
        </Popup>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="pageTitle">
                        	<DiscreteObjectKeyFrame KeyTime="0">
                        		<DiscreteObjectKeyFrame.Value>
                        			<Thickness>20,0,30,40</Thickness>
                        		</DiscreteObjectKeyFrame.Value>
                        	</DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>

                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="HorizontalAlignment">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Left"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="Margin">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="0"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SnapTxt" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BotAppBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TopAppBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="AppLogo" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
